<template>
    <!-- main页面 开始  -->
    <div class="w">
        <main class="main">
            <!-- 轮播图 -->
            <div class="focus" >
                <CarouselIndex :list="bannerList"></CarouselIndex>
            </div>

            <div class="newflash fr">
                <div class="flash_t">
                    <div class="flash_t_hd">
                        品优购快报
                        <a href="#" class="fr">更多</a>
                    </div>
                    <div class="flash_t_bd">
                        <ul>
                            <li><a href="#">【特惠】爆款耳机5折秒！</a></li>
                            <li><a href="#">【特惠】情人节，健康好礼低至5折！快来抢购吧</a></li>
                            <li><a href="#">【特惠】爆款耳机5折秒！</a></li>
                            <li><a href="#">【特惠】9.9元洗100张照片！</a></li>
                            <li><a href="#">【特惠】长虹智能空调立省1000</a></li>
                        </ul>
                    </div>
                </div>

                <div class="flash_b">
                    <ul>
                        <li class="huafei"><a href="#"><i></i>
                                <p>话费</p>
                            </a></li>
                        <li class="jipiao jian"><a href="#"><i></i>
                                <p>机票</p>
                            </a><span></span></li>
                        <li class="dianyinpiao"><a href="#"><i></i>
                                <p>电影票</p>
                            </a></li>
                        <li class="jipiao"><a href="#"><i></i>
                                <p>游戏</p>
                            </a></li>
                        <li class="caipiao"><a href="#"><i></i>
                                <p>彩票</p>
                            </a></li>
                        <li class="jipiao"><a href="#"><i></i>
                                <p>机票</p>
                            </a></li>
                        <li class="jipiao"><a href="#"><i></i>
                                <p>机票</p>
                            </a></li>
                        <li class="jipiao"><a href="#"><i></i>
                                <p>机票</p>
                            </a></li>
                        <li class="jipiao"><a href="#"><i></i>
                                <p>众筹</p>
                            </a></li>
                        <li class="jipiao"><a href="#"><i></i>
                                <p>机票</p>
                            </a></li>
                        <li class="jipiao"><a href="#"><i></i>
                                <p>机票</p>
                            </a></li>
                        <li class="jipiao"><a href="#"><i></i>
                                <p>机票</p>
                            </a></li>
                    </ul>
                </div>

                <div class="flash_f">
                    <img src="./upload/bargain.jpg">
                </div>

            </div>

        </main>
    </div>
    <!-- main页面 结束  -->
</template>

<script>
import { mapState } from 'vuex';


export default {
    name: 'MainIndex',
    mounted() {
        this.$store.dispatch('getBannerList');
    },
    computed: {
        ...mapState({
            bannerList: function (state) {
                return state.home.bannerList;
            }
        })
    },

}
</script>

<style>
/* 修改轮播图左右按钮导航的样式 */
.swiper-container {
    --swiper-theme-color: #dcd8d5;
    /* 设置Swiper风格 */
    --swiper-navigation-color: #343534;
    /* 单独设置按钮颜色 */
    --swiper-navigation-size: 30px;
    /* 设置按钮大小 */
}
</style>